<template>
  <div :class="['list', listClass, rightIconName ? 'listActive' : '']">
    <div :class="['label', labelClass]">
      <div class="flex-h-c">
        <span
          v-if="leftIconName"
          :class="['iconfont mr5', leftIconName]"
        ></span>
        <span>{{ label }}<span v-if="isShowColon">：</span></span>
      </div>
    </div>
    <div
      :class="['value', valueClass]"
      @click="rightIconName ? $emit('rightIconClick') : ''"
    >
      <span v-if="value">{{ value }}</span>
      <xc-button
        v-if="rightButtonName"
        type="primary"
        size="mini"
        @handleClick="$emit('btnClick')"
      >
        {{ rightButtonName }}
      </xc-button>
      <span v-if="rightIconName" :class="['iconfont ' + rightIconName]"></span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'xc-cell',
  props: {
    label: String,
    value: [String,Number],
    isShowColon: {
      type: Boolean,
      default: false,
    },
    rightIconName: {
      type: String,
      default: '',
    },
    rightButtonName: {
      type: String,
      default: '',
    },
    leftIconName: {
      type: String,
      default: '',
    },
    labelClass: {
      type: String,
      default: '',
    },
    valueClass: {
      type: String,
      default: '',
    },
    listClass: {
      type: String,
      default: '',
    },
  },
};
</script>
